<template>
	<view class="page-content">
		<view class="header">
			<view class="flex-col group_4">
				<view class="flex-col">
					<view class="flex-row items-center">
						<view class="group_5"></view>
						<text class="font_2 text_2 ml-9">{{formdata.placeDeparture}}</text>
					</view>
					<view class="flex-row items-center mt-17">
						<view class="section_2"></view>
						<text class="font_2 ml-9">{{formdata.destination}}</text>
					</view>
				</view>
				<view class="mt-22 flex-row justify-between items-center">
					<view class="flex-row items-center">
						<view class="flex-row items-center">
							<image class="shrink-0 image_5" src="/static/index/location2.png" />
							<text class="ml-4 font_3 text_3">{{formdata.distance?formdata.distance.substr(0,4):'--'}}km</text>
						</view>
						<view class="ml-16 flex-row items-center">
							<image class="shrink-0 image_4" src="/static/index/animal.png" />
							<text class="ml-4 font_3 text_4">1只</text>
						</view>
					</view>
					<view class="flex-row">
						<view class="flex-row items-center">
							<image class="shrink-0 image_6" src="/static/index/date.png" />
							<text class="font_4 ml-7">{{formdata.departureTime.split(" ")[0]}}</text>
						</view>
						<view class="ml-22 flex-row items-center">
							<image class="shrink-0 image_7" src="/static/index/time-light.png" />
							<text class="font_4 ml-7">{{formdata.departureTime.split(" ")[1]}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="common-box">
			<form-item-title text="司机信息"></form-item-title>
			<view class="driver-msg">
				<view class="flex-row items-center">
					<view class="flex-row items-center">
						<u-image width="48rpx" height="48rpx" :src="formdata.driverPhoto" shape="circle" />
						<view style="font-weight: bold;font-size: 28rpx;">{{formdata.name}}</view>
					</view>
					<view class="flex-row items-center" style="flex-wrap: wrap;flex: 1;gap:10rpx">
						<custom-tag cbackground="#E4E4E4" cborder="2rpx solid #E4E4E4"
							:text="formdata.drivingExperience+'年驾龄'"></custom-tag>
						<custom-tag cbackground="#E4E4E4" cborder="2rpx solid #E4E4E4" :text="formdata.age+'岁'"></custom-tag>
						<custom-tag cbackground="#E4E4E4" cborder="2rpx solid #E4E4E4" :text="formdata.sex==0?'男':'女'"></custom-tag>
					</view>
				</view>
				<view class="car">
					<u-image width="190rpx" height="98rpx" :src="formdata.carPhoto" border-radius="8" />
					<view class="name">{{formdata.carModel}}</view>
				</view>
			</view>
		</view>
		<view class="common-box">
			<form-item-title text="备注"></form-item-title>
			<view class="beizhu-msg">
				{{formdata.remark}}
			</view>
		</view>
		<view class="common-box">
			<form-item-title text="路线预览"></form-item-title>
			<view class="map-box">
				<map style="width: 100%; height:100%;" :latitude="formdata.lng" :longitude="formdata.lat" />
			</view>
		</view>
		<view class="bottom-box flex-row items-center">
			<view class="left" @click="handleToChat(formdata.publisherId)">
				聊一聊
			</view>
			<view class="right" @click="handleYuyue">
				宠物同行
			</view>
		</view>
	</view>
</template>

<script>
	import formItemTitle from "components/index/form-item-title.vue";
	import customTag from "components/common/custom-tag.vue";
	import petBasi from "../../../api/petBasi.js";
	export default {
		data() {
			return {
				formdata: {
					address: "",
					age: "",
					distance: 0,
					carModel: "",
					carPhoto: "",
					certificatePhoto: "", //营运资格证照片
					placeDeparture: "", //起送地址
					departureTime: "", //出发时间
					destination: "", //目的地
					driverLicense: "", //驾照
					driverPhoto: "", //司机照片
					drivingExperience: "", //驾龄
					lat: 0,
					lng: 0,
					name: "",
					phone: "",
					publisher: "",
					publisherId: "",
					remark: "",
					sex: "",
				},
				filterParmas: {
					nowLat: 0,
					nowLng: 0,
				}, //筛选参数
			};
		},
		onLoad(option) {
			this.getDetail(option.id, option.distance);
			const userinfo = uni.getStorageSync("userinfo");
			if (userinfo) {
				this.userinfo = userinfo;
			}
		},
		methods: {
			getDetail(id, distance) {
				petBasi.getDriverPlanById(id).then(res => {
					if (res.code === 200) {
						this.formdata = res.data;
						this.formdata.distance = distance;
					} else {
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
			},
			handleToChat(id) {
				uni.navigateTo({
					url: '/pages/news/user-chat/user-chat?userId=' + id
				})
			},
			handleYuyue() {
				petBasi.addGoApplay({
					userId: this.userinfo.id,
					eventId: this.formdata.id,
					type: 2
				}).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '申请成功',
							icon: 'none'
						})
					} else {
						throw Error(res.msg);
					}
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					})
				})
			}
		},
		components: {
			formItemTitle,
			customTag
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		background-color: #FFFFFF;
		height: 100%;
		overflow-y: auto;

		.header {
			.mt-17 {
				margin-top: 34rpx;
			}

			.ml-7 {
				margin-left: 14rpx;
			}

			.ml-9 {
				margin-left: 18rpx;
			}

			.group_4 {
				padding: 36rpx 32rpx 48rpx;
				border-bottom: solid 2rpx #f6f6f6;

				.group_5 {
					border-radius: 50%;
					width: 24rpx;
					height: 24rpx;
					border-left: solid 2rpx #999999;
					border-right: solid 2rpx #999999;
					border-top: solid 2rpx #999999;
					border-bottom: solid 2rpx #999999;
				}

				.font_2 {
					font-size: 40rpx;
					font-family: PingFang SC;
					line-height: 37.56rpx;
					font-weight: 700;
					color: #333333;
				}

				.text_2 {
					line-height: 37.52rpx;
				}

				.section_2 {
					background-color: #fcd610;
					border-radius: 50%;
					width: 24rpx;
					height: 24rpx;
				}

				.image_5 {
					width: 33.58rpx;
					height: 30.42rpx;
				}

				.font_3 {
					font-size: 24rpx;
					font-family: PingFang SC;
					line-height: 20.78rpx;
					color: #999999;
				}

				.text_3 {
					line-height: 17.8rpx;
				}

				.image_4 {
					width: 33.58rpx;
					height: 30.42rpx;
				}

				.text_4 {
					line-height: 20.76rpx;
				}

				.image_6 {
					width: 28rpx;
					height: 28rpx;
				}

				.font_4 {
					font-size: 28rpx;
					font-family: PingFang SC;
					line-height: 20.78rpx;
					font-weight: 700;
					color: #000000;
				}

				.image_7 {
					border-radius: 50%;
					width: 28rpx;
					height: 28rpx;
				}
			}
		}

		.common-box {
			padding: 32rpx 38rpx;
			border-bottom: solid 2rpx #f6f6f6;

			.driver-msg {
				.car {
					padding-top: 32rpx;

					.name {
						margin-top: 24rpx;
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
					}
				}
			}

			.beizhu-msg {
				font-weight: 500;
				font-size: 28rpx;
				color: #999999;
			}

			.map-box {
				height: 312rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				background-color: #FFF;
				overflow: hidden;
			}
		}

		.bottom-box {
			.left {
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
				padding: 42rpx 52rpx;
			}

			.right {
				width: 542rpx;
				height: 88rpx;
				background: #FCD610;
				border-radius: 68rpx 68rpx 68rpx 68rpx;
				text-align: center;
				line-height: 88rpx;
				font-weight: bold;
				font-size: 32rpx;
			}
		}
	}
</style>